<template>
    <QilinForm v-model:formConfig="formConfig" ref="formConfigRef">
        <template v-slot:projectIntroduce="slotData">
            <el-form-item :label="slotData.data.item.labelName" :prop="slotData.data.item.dataName"
                :style="slotData.data.item.style"
            >
                <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                    placeholder="请输入项目介绍！！"
                ></el-input>
            </el-form-item>
        </template>
        <template v-slot:evaluation="slotData">
            <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                placeholder="请输入个人评价~~~"
            ></el-input>
        </template>
        <template v-slot:extraFormItem>
            <el-form-item label="年收入" prop="salary" style="width:50%">
                <el-input v-model="formConfig.submitData.salary" placeholder="分逼不挣"></el-input>
            </el-form-item>
        </template>
        <template v-slot:extraItem>
            <div>这是独立于form表单之外的元素，常用于一些项目的额外奇葩的需求实现！</div>
        </template>
    </QilinForm>
</template>

<script setup>
import {reactive,ref,onMounted} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
// 获取提交表单元素DOM
const formConfigRef=ref(null);


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const changeProjectName=(item,index,info)=>{
    // console.log(item,index,info);
};

const formConfig=reactive({
    elFormConfig:{
        labelWidth:"100px",
        // labelSuffix:"：",
        border:true,
        borderColor:"red",
        validateOnRuleChange:false
    },
    itemConfig:[
        {
            hideLabel:false,
            labelName:"简介",
            dataName:"description",
            type:"input",
            inputType:"textarea",
            maxlength:300,
            rows:3,
            width:24,
            itemStyle:"color:red;"
        },
        {
            labelName:"姓名",
            dataName:"name",
            type:"input",
            inputType:"text",
            width:6,
            itemClick:(item)=>{
                console.log(item)
            }
            // validate:[
            //     {
            //         required:true,
            //         message:"请输入姓名",
            //         trigger:"blur"
            //     }
            // ]
        },
        {
            labelName:"银行卡密码",
            dataName:"bankPassword",
            type:"input",
            inputType:"password",
            width:6
        },
        {
            labelName:"身份证号码",
            dataName:"idCard",
            type:"input",
            inputType:"number",
            width:6,
            otherValidate:"idCardValidator"
        },
        {
            labelName:"手机号码",
            dataName:"phonenumber",
            type:"input",
            inputType:"text",
            width:6,
            otherValidate:"phoneValidator"
        },
        {
            labelName:"出生日期",
            dataName:"birthday",
            type:"date",
            dateType:"date",
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD",
            defaultValue:new Date(2000,1,1),
            width:8
        },
        {
            labelName:"年龄",
            dataName:"age",
            type:"number",
            width:8
        },
        {
            labelName:"性别",
            dataName:"gender",
            type:"select",
            dataListName:"genderList",
            width:8
        },
        {
            labelName:"参与项目",
            dataName:"projectName",
            type:"cascader",
            dataListName:"projectNameList",
            filterable:true,
            cascaderProps:{
                label:"name",
                value:"id",
                children:"children",
                multiple:true
            },
            change:changeProjectName,
            style:"width:100%",
            width:8,
            // validate:[
            //     {
            //         required:true,
            //         message:"请选择参与项目",
            //         trigger:["change","blur"]
            //     }
            // ]
        },
        {
            labelName:"工作时间",
            dataName:"jobTime",
            type:"date",
            dateType:"daterange",
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD",
            dateWidth:300,
            width:8
        },
        {
            labelName:"邮箱",
            dataName:"email",
            type:"input",
            inputType:"text",
            width:8,
            otherValidate:"emailValidator"
        },
        {
            labelName:"项目介绍",
            dataName:"projectIntroduce",
            type:"itemSlot",
            slotName:"projectIntroduce",
            style:"width:50%;"
        },
        {
            labelName:"实力评级",
            dataName:"level",
            type:"rate",
            disabled:false,
            allowHalf:true,
            showText:false,
            size:"default",
            width:12
        },
        {
            labelName:"身份",
            dataName:"identify",
            type:"radio",
            dataListName:"identifyList",
            width:6
        },
        {
            labelName:"开关",
            dataName:"switch",
            type:"switch",
            activeText:"开启",
            inactiveText:"关闭",
            activeValue:0,
            inactiveValue:1,
            width:6,
            change:(item,val,ref)=>{
                // console.log(item,val,ref);
                if(val === 1){
                    formConfig.itemConfig[1].validate=[]
                }else{
                    formConfig.itemConfig[1].validate=[
                        {
                            required:true,
                            message:"请输入姓名",
                            trigger:"blur"
                        }
                    ]
                };
                formConfigRef.value.createFormRules();
            }
        },
        {
            labelName:"爱好",
            dataName:"hobby",
            type:"checkbox",
            dataListName:"hobbyList",
            width:12
        },
        {
            labelName:"上传附件",
            dataName:"file",
            type:"upload",
            fileList:[],
            limit:1,
            uploadText:"不上传服务器方式",
            fileTypeText:"支持pdf、excel、word、ppt和png等图片文件格式",
            fileType:["mp4","png","jpg","jpeg","gif"],
            fileOptions:{
                serverName:"name"
            },
            width:12,
            customFn:(item,file)=>{
                // console.log(item,file);
                formConfig.submitData.file.forEach((item)=>{
                    if(!item.fileName){ //过滤未上传的文件
                        let formData = new FormData();
                        formData.append("file",item.raw);
                        fetch("http://36.134.22.190:8061/common/upload",{
                            headers:{
                                Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJUY1h3SHUxZzVQaTZ5M2JJTGI5OEQ5b01RV21zZFNsOSIsInVzZXJJZCI6MX0.rasdIZUzyc2-PotmppmvxFUWIXWmrxYZMEzA8ywGZeI"
                            },
                            method:"post",
                            body:formData
                        }).then((response)=>{
                            // console.log(response);
                            return response.json();
                        }).then((res)=>{
                            // console.log(res);
                            Object.keys(res.data).forEach((key)=>{
                                item[key] = res.data[key];
                                Reflect.deleteProperty(item,"raw");
                            });
                        });
                    }
                });
            },
            previewFn:(item)=>{
                console.log(item);
            }
        },
        {
            labelName:"上传附件",
            dataName:"file1",
            type:"upload",
            action:"http://47.122.16.23:8081/common/upload",
            headers:{
                Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoyNDIiLCJyblN0ciI6InF0alRMQ0tjS1lSbkl6S2VtR2VXbkFXc1loVm44WThzIiwidXNlcklkIjoyNDJ9.cj3Wd6Vugx2MdT6jJHCC-m3npJuYtF8dvBkwsIg6Z38"
            },
            autoUpload:true,
            fileList:[],
            limit:1,
            uploadText:"上传服务器方式",
            width:12,
            previewFn:(item)=>{
                console.log(item);
            }
        },
        {
            labelName:"上传图片",
            dataName:"image",
            type:"image",
            fileList:[],
            limit:3,
            fileTypeText:"不上传服务器方式",
            imageOptions:{
                serverUrl:"url"
            },
            width:8,
            customFn:(item,file)=>{
                formConfig.submitData.image.forEach((item)=>{
                    if(!item.fileName){ //过滤未上传的文件
                        let formData = new FormData();
                        formData.append("file",item.raw);
                        fetch("http://192.168.10.103:8091/common/upload",{
                            headers:{
                                Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJQdmpyVktIczJRZGtoeTBod2xHd2h5RURxYnkzcXZjbiIsInVzZXJJZCI6MX0.LRQ5w-wDF5qR9qtO-pSQCRYOnfzT0Ie40GiNBlHhdx8"
                            },
                            method:"post",
                            body:formData
                        }).then((response)=>{
                            // console.log(response);
                            return response.json();
                        }).then((res)=>{
                            // console.log(res);
                            Object.keys(res.data).forEach((key)=>{
                                item[key] = res.data[key];
                                Reflect.deleteProperty(item,"raw");
                            });
                        });
                    }
                });
            }
        },
        {
            labelName:"上传图片",
            dataName:"image1",
            type:"image",
            action:"http://36.134.22.190:8061/common/upload",
            headers:{
                Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJVVGZMUW5hTlFaTW43Q05IVlgxR1hyYkRhNlFjZUZxYyIsInVzZXJJZCI6MX0.I05ywI7hYtTQRcUQb2lhkERPJLHmgeiJ9NEQ_m8sxtA"
            },
            autoUpload:true,
            fileList:[],
            limit:3,
            fileTypeText:"上传服务器方式",
            imageOptions:{
                serverUrl:"url"
            },
            width:8
        },
        {
            labelName:"上传图片",
            dataName:"image2",
            type:"image",
            fileList:[],
            fileTypeText:"另一种样式",
            showIconImage:true,
            customFn:(item,file)=>{ //自定义方法，仅针对于无指定action时上传
                console.log(formConfig.submitData.image2);
            },
            width:8
        },
        {
            labelName:"人物介绍",
            dataName:"richtext",
            type:"wangEditor",
            wangEditorConfig:{
                editorConfig:{
                    placeholder:"请输入内容......"
                }
            },
            width:24
        },
        {
            labelName:"项目成就",
            dataName:"richtext1",
            type:"vueEditor",
            editifyConfig:{
                autoHeight:true,
                customStyle:"height:300px;"
            },
            width:24
        },
        {
            labelName:"个人成就",
            dataName:"richtext2",
            type:"kaitifytext",
            kaitifyConfig:{
                placeholder:"请输入内容111",
                menuPopoverProps:{
                    zIndex:5000
                },
                menuImageProps:{
                    customUpload:(ref,file)=>{
                        console.log(file);
                    }
                },
                onPasteImage:(ref,file)=>{
                    console.log(file);
                }
            },
            width:24,
            validate:[
                {
                    required:true,
                    message:"请输入个人成就",
                    trigger:"blur"
                }
            ]
        },
        {
            labelName:"个人评价",
            dataName:"evaluation",
            type:"slot",
            slotName:"evaluation",
            width:12
        }
    ],
    selectLists:{
        genderList:[
            {
                label:"男",
                value:0
            },
            {
                label:"女",
                value:1
            },
            {
                label:"人妖",
                value:2
            }
        ],
        projectNameList:[
            {
                name:"南京冠霆智能科技有限公司",
                id:1,
                children:[
                    {
                        name:"看守所项目",
                        id:11
                    },
                    {
                        name:"拘留所项目",
                        id:12
                    },
                    {
                        name:"戒毒所项目",
                        id:13
                    },
                    {
                        name:"安康医院项目",
                        id:14
                    }
                ]
            },
            {
                name:"亚信安全有限公司",
                id:2,
                children:[
                    {
                        name:"亚信智网有限公司",
                        id:21,
                        children:[
                            {
                                name:"SDP零信任项目",
                                id:211
                            },
                            {
                                name:"动态应用安全防护系统BSG",
                                id:212
                            }
                        ]
                    }
                ]
            },
            {
                name:"苏软科技（南京）有限公司",
                id:3,
                children:[
                    {
                        name:"云上贵州项目",
                        id:31
                    },
                    {
                        name:"红花街道h5项目",
                        id:32
                    },
                    {
                        name:"温州市党政机关信息化项目",
                        id:33
                    }
                ]
            },
            {
                name:"南京联创智慧城市科技有限公司",
                id:4,
                children:[
                    {
                        name:"U创办公管理系统",
                        id:41
                    },
                    {
                        name:"U创办公小程序",
                        id:42
                    }
                ]
            }
        ],
        identifyList:[
            {
                label:"学生",
                value:0
            },
            {
                label:"程序员",
                value:1
            }
        ],
        hobbyList:[
            {
                label:"唱",
                value:0
            },
            {
                label:"跳",
                value:1
            },
            {
                label:"rap",
                value:2
            },
            {
                label:"篮球",
                value:3
            }
        ]
    },
    buttonConfig:[
        {
            btnName:"重置",
            btnType:"default",
            btnSize:"default",
            isHideFn:(item)=>{
                return true;
            },
            formRefName:formConfigRef,
            btnClick:(formRef)=>{
                formRef.formResetFields();
            }
        },
        {
            btnName:"修改",
            btnType:"primary",
            btnSize:"default",
            isHide:true,
            formRefName:formConfigRef,
            btnClick:(formRef)=>{

            }
        },
        {
            btnName:"提交",
            btnType:"primary",
            btnSize:"default",
            formRefName:formConfigRef,
            btnClick:(formRef)=>{
                console.log(formRef);return;
                formRef.formValidate((valid)=>{
                    if(valid){
                        // console.log(formConfig.submitData.image1);
                        // console.log(formConfig.submitData.file);
                        // console.log(formConfig.submitData.level);
                        console.log(formConfig.submitData);
                        console.log(formConfig.submitData.richtext2);
                        // setTimeout(()=>{
                        //     formRef.formResetFields();
                        // },2000);
                    }
                })
            }
        },
    ],
    submitData:{
        name:"",
        description:"",
        bankPassword:"",
        idCard:"",
        phonenumber:"",
        birthday:"",
        age:0,
        gender:0,
        projectName:"",
        jobTime:"",
        email:"",
        projectIntroduce:"",
        level:0,
        identify:1,
        switch:0,
        hobby:[0,1],
        file:[],
        file1:[],
        // image:[],
        image:[{
            fileName: "/profile/upload/2025/02/12/Camera_share_cover_1722481125635_20250212095651A006.png",
            name:  "Camera_share_cover_1722481125635.png",
            newFileName: "Camera_share_cover_1722481125635_20250212095651A006.png",
            originalFilename: "Camera_share_cover_1722481125635.png",
            // raw:{uid:21319023491023192},
            // uid:21319023491023192,
            // url: "http://192.168.10.103:8091/profile/upload/2025/02/12/Camera_share_cover_1722481125635_20250212095651A006.png"
            url: "https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
        }],
        // image1:[],
        image1:[
            {
                fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                originalFilename:"20221123-mp-certified-banner.png",
                url:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ],
        image2:[],
        richtext:"",
        richtext1:"",
        richtext2:"",
        evaluation:"",
        salary:""
    }
});
// setTimeout(() => {
//     formConfig.submitData.richtext2 = "模拟数据延时响应"
// }, 1500);


/*
    生命周期等代码区域
*/
onMounted(()=>{
    formConfig.submitData.richtext2 = "模拟数据延时响应";
});


</script>

<style lang="scss" scoped>
</style>
